<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />
  <title>⌚⏰🕰 Clock</title>
  <link
    href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css"
    rel="stylesheet"
  >
  <link
    href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
    rel="stylesheet"
  >
  <!-- Custom styles for this template -->
  <link
    href="lesson_03.css"
    rel="stylesheet"
  />
</head>

<body>
  <main role="main">
    <section class="jumbotron text-center">
      <div class="container">
        <h1>⌚ 电子钟</h1>
        <p class="lead text-muted"> 取电脑当前时间的一个电子钟。<br />使用了 Bootstrap4、Html5、CSS3 及 Vue.js 技术。 </p>
        <p>
          <a
            href="#"
            class="btn btn-primary my-2"
          >斜杠阿峰</a>
        </p>
      </div>
    </section>
    <div
      class="album py-5 bg-light"
      id="app"
    >
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="card mb-4 shadow-sm">
              <!-- 钟 -->
              <div id="clock">
                <!-- 循环 -->
                <span
                  class="anchor"
                  v-for=" m in 60"
                >
                  <!-- 刻度 -->
                  <span
                    v-if="m%5 != 0"
                    class="anchor_line"
                    :style="{
                        left: center.x + 'px', 
                        top: center.y - 1 +'px', 
                        transform: 'rotate(' + m*6 + 'deg) translate(240px)',
                      }"
                  >
                  </span>
                  <!-- 数字 - 分钟 -->
                  <span
                    class="minute-num"
                    v-if="m%5 === 0"
                    :style="{
                        left: center.x -16 + 'px', 
                        top: center.y - 14 +'px', 
                        transform: 'translate(' + Math.cos(m*6*Math.PI/180-Math.PI/2)*248 +'px, ' + Math.sin(m*6*Math.PI/180-Math.PI/2)*248 +'px)',
                      }"
                  >{{m}}</span>
                  <!-- 数字 - 小时 -->
                  <span
                    class="hour-num"
                    v-if="m%5 === 0"
                    :style="{
                        left: center.x + ( center.w / 2 - 50 ) + 'px', 
                        top: center.y + ( center.h / 2 - 60 ) +'px', 
                        transform: 'translate(' + Math.cos(m*6*Math.PI/180-Math.PI/2)*186 +'px, ' + Math.sin(m*6*Math.PI/180-Math.PI/2)*186 +'px)',
                      }"
                  >{{m/5}}</span>
                </span>
                <!-- 刻度结束 -->
                <!-- 日期、星期 -->
                <span
                  id="date_week"
                  :style="{top: center.y + 80 + 'px'}"
                >{{ date.date_week }}</span>
                <!-- 分针 - 最底层的指针 -->
                <span
                  id="minute-hand"
                  :style="{
                      left: center.x + 'px', 
                      top: center.y + 'px', 
                      transform: 'rotate('+ date.minute_rotate +'deg) translate(24px)'}"
                ></span>
                <!-- 时针 - 在分针之上 - 中间层指针-->
                <span
                  id="hour-hand"
                  :style="{
                    left: center.x + 'px', 
                    top: center.y + 'px', 
                    transform: 'rotate('+ date.hour_rotate +'deg) translate(24px)'}"
                ></span>
                <!-- 秒针 - 在时针之上 - 最上层指针 -->
                <span
                  id="second-hand"
                  :style="{
                    left: center.x + 'px', 
                    top: center.y +'px', 
                    transform: 'rotate('+ date.second_rotate +'deg) translate(-36px)'}"
                ></span>
                <!-- 表盘中心 -->
                <span
                  id="center"
                  :style="{
                      width: center.w + 'px', 
                      height: center.h + 'px', 
                      left: center.x - center.w / 2 + 'px',
                      top: center.y - center.h / 2 + 'px', 
                      'border-radius': center.r + 'px'}"
                >
                </span>
              </div>
              <div class="card-body">
                <p class="card-text">Vue.js 时钟 - 使用了 Bootstrap4、Html5、CSS3 及 Vue.js 技术。</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="text-muted">
    <div class="container py-4">
      <p class="float-right">
        <a href="#">⬆</a>
      </p>
      <p>祝您玩的愉快!</p>
      <p>www.fongzz.com</p>
    </div>
  </footer>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="lesson_03.js"></script>
</body>

</html>